﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../plugins/fontawesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../scripts/footer.js"></script>
    <script src="../src/js/rayui.js" use="layer,navbar"></script>
    <script src="../scripts/common.js"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
    <script>

        var index = 1, data = [];
        var now = new Date(2017, 10, 1);
        var mm = now.getMinutes();

        var icons = [
            "ra-file", "fa-automobile", "ra-refresh", "fa-bar-chart", "ra-smile", "fa-bank ", "ra-restore", "fa-car",
            "ra-right", "ra-folder-close", "ra-folder-open", "ra-add", "ra-dustbin", "ra-copy", "ra-circle"
        ], iconsCount = icons.length;

        function getNowFormatDate(date) {
            var seperator1 = "-";
            var seperator2 = ":";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year +
                seperator1 +
                month +
                seperator1 +
                strDate +
                " " +
                date.getHours() +
                seperator2 +
                date.getMinutes() +
                seperator2 +
                date.getSeconds();
            return currentdate;
        }


        function getNodes(count, prefix) {
            var str = [];
            for (var i = 1; i <= count; i++) {
                str.push({
                    id: index++,
                    name: "菜单" + (prefix || '') + i,
                    icon: "" + icons[i % iconsCount],
                    createTime: getNowFormatDate(now)
                });
            }
            return str;
        }

        data = getNodes(5);
        data[1].children = getNodes(3, "2-");
        data[1].children[1].children = getNodes(3, "2-2-");
        data[3].children = getNodes(3, "4-");
        data[3].children[0].children = getNodes(3, "4-1-");
    </script>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>

    <br />
    <br />

    <h4>横向菜单</h4>
    <div id="nav-land1" style="border: 1px solid #eee"></div>

    <h4>只渲染到第2级</h4>
    <div id="nav-land2" style="border: 1px solid #eee"></div>

    <h4>黑色</h4>
    <div id="nav-land3" style="border: 1px solid #eee"></div>

    <h4 style="color:#4276dc">蓝色</h4>
    <div id="nav-land4" style="border: 1px solid #eee"></div>

    <h4 style="color:#009966">绿色</h4>
    <div id="nav-land5" style="border: 1px solid #eee"></div>

    <h4 style="color:#CC3399">红色</h4>
    <div id="nav-land6" style="border: 1px solid #eee"></div>

    <h4>竖向菜单</h4>
    <div class="row">
        <div class="col-4">
            <h4>正常</h4>
            <div id="nav-vert1" style="width: 200px; height: 300px; border: 1px solid #eee">
            </div>
        </div>
        <div class="col-4">
            <h4>默认展开第一个，级别缩进</h4>
            <div id="nav-vert2" style="width: 200px; height: 300px; border: 1px solid #eee">
            </div>
        </div>
        <div class="col-4">
            <h4>黑色</h4>
            <div id="nav-vert3" style="width: 200px; height: 300px; border: 1px solid #eee">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-4">
            <h4 style="color:#4276dc">蓝色</h4>
            <div id="nav-vert4" style="width: 200px; height: 300px; border: 1px solid #eee">
            </div>
        </div>
        <div class="col-4">
            <h4 style="color:#009966">绿色</h4>
            <div id="nav-vert5" style="width: 200px; height: 300px; border: 1px solid #eee">
            </div>
        </div>
        <div class="col-4">
            <h4 style="color:#CC3399">红色</h4>
            <div id="nav-vert6" style="width: 200px; height: 300px; border: 1px solid #eee">
            </div>
        </div>
    </div>


    <h4 class="spliter">手写横向菜单</h4>
    <div class="rayui-nav" skin="green" style="border: 1px solid #eee">
        <ul>
            <li><a href="javascript:"><i class="fa fa-automobile"></i><span>菜单1</span></a></li>
            <li>
                <a href="javascript:"><i class="ra ra-refresh"></i><span>菜单2</span></a>
                <ul>
                    <li><a href="javascript:"><i class="fa fa-automobile"></i><span>菜单2-1</span></a></li>
                    <li class="rayui-spread">
                        <a href="javascript:"><i class="ra ra-refresh"></i><span>菜单2-2</span></a>
                        <ul>
                            <li><a href="javascript:"><i class="fa fa-automobile"></i><span>菜单2-2-1</span></a></li>
                            <li><a href="javascript:"><i class="ra ra-refresh"></i><span>菜单2-2-2</span></a></li>
                            <li><a href="javascript:"><i class="fa fa-bar-chart"></i><span>菜单2-2-3</span></a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:"><i class="fa fa-bar-chart"></i><span>菜单2-3</span></a></li>
                </ul>
            </li>
            <li><a href="javascript:"><i class="fa fa-bar-chart"></i><span>菜单3</span></a></li>
            <li>
                <a href="javascript:"><i class="ra ra-smile"></i><span>菜单4</span></a>
                <ul>
                    <li>
                        <a href="javascript:"><i class="fa fa-automobile"></i><span>菜单4-1</span></a>
                        <ul>
                            <li><a href="javascript:"><i class="fa fa-automobile"></i><span>菜单4-1-1</span></a></li>
                            <li><a href="javascript:"><i class="ra ra-refresh"></i><span>菜单4-1-2</span></a></li>
                            <li><a href="javascript:"><i class="fa fa-bar-chart"></i><span>菜单4-1-3</span></a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:"><i class="ra ra-refresh"></i><span>菜单4-2</span></a></li>
                    <li><a href="javascript:"><i class="fa fa-bar-chart"></i><span>菜单4-3</span></a></li>
                </ul>
            </li>
            <li><a href="javascript:"><i class="fa fa-bank "></i><span>菜单5</span></a></li>
        </ul>
    </div>

    <h4 class="spliter">手写竖向菜单</h4>
    <div class="rayui-nav nav-vert nav-indent" skin="red" style="border: 1px solid #eee">
        <ul>
            <li><a href="javascript:"><i class="fa fa-automobile"></i><span>菜单1</span></a></li>
            <li>
                <a href="javascript:"><i class="ra ra-refresh"></i><span>菜单2</span></a>
                <ul>
                    <li><a href="javascript:"><i class="fa fa-automobile"></i><span>菜单2-1</span></a></li>
                    <li class="rayui-spread">
                        <a href="javascript:"><i class="ra ra-refresh"></i><span>菜单2-2</span></a>
                        <ul>
                            <li><a href="javascript:"><i class="fa fa-automobile"></i><span>菜单2-2-1</span></a></li>
                            <li><a href="javascript:"><i class="ra ra-refresh"></i><span>菜单2-2-2</span></a></li>
                            <li><a href="javascript:"><i class="fa fa-bar-chart"></i><span>菜单2-2-3</span></a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:"><i class="fa fa-bar-chart"></i><span>菜单2-3</span></a></li>
                </ul>
            </li>
            <li><a href="javascript:"><i class="fa fa-bar-chart"></i><span>菜单3</span></a></li>
            <li>
                <a href="javascript:"><i class="ra ra-smile"></i><span>菜单4</span></a>
                <ul>
                    <li>
                        <a href="javascript:"><i class="fa fa-automobile"></i><span>菜单4-1</span></a>
                        <ul>
                            <li><a href="javascript:"><i class="fa fa-automobile"></i><span>菜单4-1-1</span></a></li>
                            <li><a href="javascript:"><i class="ra ra-refresh"></i><span>菜单4-1-2</span></a></li>
                            <li><a href="javascript:"><i class="fa fa-bar-chart"></i><span>菜单4-1-3</span></a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:"><i class="ra ra-refresh"></i><span>菜单4-2</span></a></li>
                    <li><a href="javascript:"><i class="fa fa-bar-chart"></i><span>菜单4-3</span></a></li>
                </ul>
            </li>
            <li><a href="javascript:"><i class="fa fa-bank "></i><span>菜单5</span></a></li>
        </ul>
    </div>

    <script>


        rayui.ready(function () {

            var navbar = rayui.navbar,
                layer = rayui.layer;

            function initVert6() {
                navbar.render({
                    elem: "#nav-vert6",
                    data: data,
                    isLand: false,
                    skin: "red",
                    onClick: function (data) {
                    }
                });
            }

            function initVert5() {
                navbar.render({
                    elem: "#nav-vert5",
                    data: data,
                    isLand: false,
                    skin: "green",
                    onClick: function (data) {
                    }
                });
            }

            function initVert4() {
                navbar.render({
                    elem: "#nav-vert4",
                    data: data,
                    isLand: false,
                    skin: "blue",
                    onClick: function (data) {
                    }
                });
            }

            function initVert3() {
                navbar.render({
                    elem: "#nav-vert3",
                    data: data,
                    isLand: false,
                    skin: "black",
                    indent: true,
                    onClick: function (data) {
                    }
                });
            }

            function initVert2() {
                var tmpData = $.extend(true, [], data);
                tmpData[0].icon = "../images/1.png";
                tmpData[0].children = getNodes(3, "1-");
                tmpData[3].disabled = true;
                navbar.render({
                    elem: "#nav-vert2",
                    data: tmpData,
                    isLand: false,
                    indent: true,
                    spreadFirst: true,
                    format: function (row, data) {
                        var li = [];
                        if (typeof row.icon === "string") {
                            if (row.icon.indexOf('fa-') === 0) {
                                li.push('<i class="fa ' + row.icon + '"></i>');
                            } else if (row.icon.indexOf('ra-') === 0) {
                                li.push('<i class="ra ' + row.icon + '"></i>');
                            } else {
                                li.push('<img src="' + row.icon + '" alt=""/>');
                            }
                        }

                        li.push('<span>format' + row.name + '</span>');
                        li.push('</a></li>');
                        return li.join('');
                    },
                    onClick: function (data) {
                    }
                });
            }

            function initVert1() {
                navbar.render({
                    elem: "#nav-vert1",
                    data: data,
                    isLand: false,
                    onClick: function (data) {
                        layer.msg(JSON.stringify(data));
                    }
                });
            }

            function initLand6() {
                navbar.render({
                    elem: "#nav-land6",
                    data: data,
                    skin: "red",
                    onClick: function (data) {
                    }
                });
            }

            function initLand5() {
                navbar.render({
                    elem: "#nav-land5",
                    data: data,
                    skin: "green",
                    onClick: function (data) {
                    }
                });
            }

            function initLand4() {
                navbar.render({
                    elem: "#nav-land4",
                    data: data,
                    skin: "blue",
                    onClick: function (data) {
                    }
                });
            }

            function initLand3() {
                navbar.render({
                    elem: "#nav-land3",
                    data: data,
                    skin: "black",
                    onClick: function (data) {
                    }
                });
            }

            function initLand2() {
                var tmpData = $.extend(true, [], data);
                tmpData[1].disabled = true;
                navbar.render({
                    elem: "#nav-land2",
                    data: tmpData,
                    toLevel: 1,
                    onClick: function (data) {
                        layer.msg(JSON.stringify(data));
                    }
                });
            }

            function initLand1() {
                navbar.render({
                    elem: "#nav-land1",
                    data: data,
                    onClick: function (data) {
                    }
                });
            }


            initLand1();
            initLand2();
            initLand3();
            initLand4();
            initLand5();
            initLand6();
            initVert1();
            initVert2();
            initVert3();
            initVert4();
            initVert5();
            initVert6();
        })

    </script>


    <h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

使用说明：

navbar属性option：
elem: rayui-tab对象
bgColor: //背景颜色，优先级比skin高
isLand: true,//true横向 false竖向
fieldId: "id", //数据列
fieldName: "name", //显示列
fieldChildren: "children", //子节点
toLevel: 100,//渲染级别，从0开始，使用此属性可以实现两个菜单级联
titleSpread: true,//点击标题展开
indent: false,//级别缩进，默认无缩进
spreadFirst: false,//展开第一个
spreadOnly: true, //统一级别只展开一个
animSpeed: 200,//动画执行时间
skin:皮肤，可选black、blue、green、red，也可以自定义皮肤，书写方式参照css样式第3328行
format: function(row, data)：格式化li数据，row为当前数据，data原始总数据
onClick:function(row)：点击事件，row为当前数据

data数据格式
id: 唯一id，对应option的fieldId
name: 显示名称，对应option的fieldName
icon: 图标，支持ra fa img的src
children: 子集菜单
disabled: 禁止点击


</pre>
    <div class="card">
        1、手写菜单可用样式：nav-land横向、nav-vert竖向、nav-indent级别缩进、skin皮肤、
    </div>
</body>
</html>